<template>
	<div class="home">
		<div class="left">
			<div class="form" ref="form">
				<el-input placeholder="10101148" suffix-icon="el-icon-date" v-model="input1">
					<template slot="prepend">所有部门：</template>
				</el-input>
				<div class="quan">
					<el-input placeholder="" suffix-icon="el-icon-date" v-model="input1">

					</el-input>
				</div>
			</div>
			<div :style="{height:`calc(100% - ${formh}px`}">
				<div class="table" style="height: 40px;">
					<div class="table_left" style="height: 40px;">
						工号
					</div>
					<div class="table_right" style="height: 40px;">
						人员
					</div>
					<!-- <div :style="{width:`${ScrollbarWidth}px`}">
						
					</div> -->
				</div>
				<div class="tab" ref="table" :style="{height:`calc(100% - 40px)`}" style="overflow-y: auto;">
					<div class="table" style="height: 40px;" v-for="(item,index) in tableData" :key="index" :class='index%2==0?"bai":""'>
						<div class="table_left" style="height: 40px;">
							{{item.gh}}
						</div>
						<div class="table_right" style="height: 40px;">
							{{item.ry}}
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="right1">
			<div class="home__top" ref="home__top" style="align-items: center;justify-content: space-between;">
				<div style="display: flex;align-items: center;">
					<div class="form_item">
						<div class="label">
							显示比例:
						</div>
						<el-input placeholder="100%" suffix-icon="el-icon-arrow-down" v-model="form.value1">
						</el-input>
					</div>
					<div class="form_item">
						<div class="label">
							明细至产品(金额):
						</div>
						<el-input placeholder="100%" suffix-icon="el-icon-arrow-down" v-model="form.value1">
						</el-input>
					</div>
					<div class="form_item sf">
						<div class="label">
							字体缩放:
						</div>
						<el-input placeholder="110" v-model="form.value1">
							<i class="el-icon-arrow-left" slot="prepend"></i>
							<i class="el-icon-arrow-right" slot="append"></i>
						</el-input>
					</div>
					<div class="form_item sf">
						<div class="label">
							打印列数:
						</div>
						<el-input placeholder="110" v-model="form.value1">
							<i class="el-icon-arrow-left" slot="prepend"></i>
							<i class="el-icon-arrow-right" slot="append"></i>
						</el-input>
					</div>
					<div class="form_item sf">
						<div class="label">
							打印列宽:
						</div>
						<el-input placeholder="110" v-model="form.value1">
							<i class="el-icon-arrow-left" slot="prepend"></i>
							<i class="el-icon-arrow-right" slot="append"></i>
						</el-input>
					</div>
					<div class="form_item">
						
					</div>
				</div>
				<div class="right">
					<div class="label">
						姓名:10013(10013)
					</div>
					<div class="label">
						日期:2024-01-01至2024-04-18
					</div>
					
				</div>
				
				
			</div>
			<el-table border :data="tableData1" stripe style="width: 100%"
				:height="`calc(100% - ${footerh}px - ${hometopH}px - 49px)`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
				:cell-style="{color:'#1F163A',textAlign:'center'}">
				<el-table-column prop="mc" label="产品名称" width="150">
				</el-table-column>
				<el-table-column prop="gx" label="工序" width="400">
				</el-table-column>
				<el-table-column prop="sl" label="数量" width="250">
				</el-table-column>
				<el-table-column prop="dj" label="单价" width="250">
				</el-table-column>
				<el-table-column prop="je" label="金额" width="250">
				</el-table-column>
			</el-table>
			<div class="hj"
				style="height: 49px;background: #F9F9F9;display: flex;align-items: center;justify-content: flex-end;color: #1F163A;">
				合计：件数26 差额0
			</div>
			<div class="footer" ref="footer">
				<div>
					总共2 条记录
				</div>
				<el-pagination background small layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div>
		</div>
		

		
		<!-- <div class="home__con">
			<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(100% - ${footerh}px)`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A"}' :cell-style="{color:'#1F163A'}">
				<el-table-column type="index" label="序" width="76">
				</el-table-column>
				<el-table-column prop="bm" label="单据类型" width="120">
				</el-table-column>
				<el-table-column prop="name" label="单据号" width="200">
				</el-table-column>
				<el-table-column prop="bz" label="收回日期" width="120">
				</el-table-column>
				<el-table-column prop="bz" label="生产单号" width="130">
				</el-table-column>
				<el-table-column prop="ys" label="客户" width="100">
				</el-table-column>
				<el-table-column prop="size" label="产品名称" width="130">
				</el-table-column>
				<el-table-column prop="fdw" label="颜色" width="130">
				</el-table-column>
				<el-table-column prop="hsl" label="尺码" width="200">
				</el-table-column>
				<el-table-column prop="gdhs" label="备注" width="250">
				</el-table-column>
				<el-table-column prop="hsxs" label="APP控制" width="200">
				</el-table-column>
			</el-table>
			<div class="footer" ref="footer">
				<div>
					显示第1到第22条记录，总共 3272 条记录
				</div>
				<el-pagination background layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div>
		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					value1: ''
				},
				btnlist: [{
					text: '定义列名'
				}, {
					text: '全部上传'
				}, {
					text: '全部下载'
				}, {
					text: '导入信息'
				}, {
					text: '扩展信息'
				}, {
					text: '尺码表'
				}, {
					text: '颜色表'
				}, {
					text: '结构'
				}, {
					text: '成本'
				}, {
					text: '分类'
				}, {
					text: '全部'
				}, ],
				tableData: [{
					gh: '10008',
					ry: '10008'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				},{
					gh: '10101001',
					ry: '6308#K'
				}],
				tableData1:[
					{mc:'3M002#',gx:'车间移交-成品完工',sl:"620",dj:'0.00',je:'0'},
					{mc:'3M002#',gx:'车间移交-成品完工',sl:"620",dj:'0.00',je:'0'},
				],
				footerh: 67,
				formh: 0,
				tablew:0,
				ScrollbarWidth:0,
				hometopH:0
			}
		},
		created() {
			// this.
		},
		mounted() {
			this.formh = this.$refs.form.offsetHeight
			this.footerh = this.$refs.footer.offsetHeight
			this.hometopH=this.$refs.home__top.offsetHeight
			let _this = this
			window.onresize = function() {
				_this.formh = _this.$refs.form.offsetHeight
				_this.footerh = _this.$refs.footer.offsetHeight
				
				_this.hometopH=_this.$refs.home__top.offsetHeight
			};
			this.ScrollbarWidth=this.getScrollbarWidth()
			console.log(this.footerh)
		},
		methods:{
			getScrollbarWidth() {
			
			  // Creating invisible container
			  const outer = document.createElement('div');
			  outer.style.visibility = 'hidden';
			  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
			  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
			  document.body.appendChild(outer);
			
			  // Creating inner element and placing it in the container
			  const inner = document.createElement('div');
			  outer.appendChild(inner);
			
			  // Calculating difference between container's full width and the child width
			  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
			
			  // Removing temporary elements from the DOM
			  outer.parentNode.removeChild(outer);
			
			  return scrollbarWidth;
			
			}
		},
		
	}
</script>
<style scoped>
	.home {
		/* width: ; */
		background-color: #fff;
		height: calc(100% - 26px);
		/* border-radius: 5px; */
		padding: 13px 10px;
		display: flex;
		align-items: center;
	}

	.home__top {
		display: flex;
		align-items: center;
		padding-bottom: 14px;
	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		margin-top: 10px;
		height: calc(100% - 50px);
	}

	/deep/.el-table .cell {
		text-align: center !important;
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 48px;
	}

	.form_item {
		display: flex;
		align-items: center;
		/* width: 200px; */
		justify-content: space-between;
		margin-right: 18px;
	}

	/* .form_item>.el-input__inner{
		width: 200px!important;
	} */
	.label {
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #5E6061;
		flex-shrink: 1;
		width: fit-content;
		white-space: nowrap;
		margin-right: 12px;
	}

	/deep/.el-input-group__prepend {
		width: fit-content !important;
	}

	/deep/.el-input-group__append {
		width: fit-content !important;
		padding: 0 10px;
	}

	/deep/.sf .el-input__inner {
		width: 67px;
		padding: 0 10px;
		text-align: center;
	}

	.right {
		display: flex;
		align-items: center;
		justify-self: flex-end;
	}

	.right_btn {
		padding: 0 26px;
		line-height: 31px;
		background: rgba(74, 119, 246, 0.2);
		border: 1px solid #4A77F6;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 14px;
		color: #4A77F6;
		cursor: pointer;
		margin-left: 18px;
	}

	.left {
		width: 350px;
		/* background-color: red; */
		height: 100%;
	}

	/deep/.left .el-input-group__prepend {
		width: 79px !important;
	}

	/deep/.left .el-input__inner {
		width: calc(350px - 20px - 79px - 8px);
	}

	/deep/.quan .el-input__inner {
		width: calc(350px);
		margin: 8px 0 10px;
	}

	.table_left {
		width: 130px;
		border-right: 1px solid #DEDEDE;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table_right {
		width: 220px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #DEDEDE;
	}

	.table {
		display: flex;
		align-items: center;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 15px;
		color: #1F163A;
		
		border-left: 1px solid #DEDEDE;
		border-top: 1px solid #DEDEDE;
		background: #F9F9F9;
	}
	.bai{
		background-color: #fff;
	}
	/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
	.tab::-webkit-scrollbar {
		display: none;
	}
	
	/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
	.tab {
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}
	.right1{
		/* background-color: red; */
		width: calc(100% - 390px);
		height: 100%;
		margin-left: 18px;
	}
	.hj {
		font-size: 19px;
		padding-right: 40px;
	}
</style>